import { toThousands } from '@/utlis/utlis'
import React, { FC } from 'react'
import styled from "styled-components"
interface ICount {
    addText: string,
    addNum: string|number,
    addUnit?: string,
    freeze: string,
    freezeNum: string|number,
    freezeUnit?: string,

}

const AddAndDel = styled.div`
        padding-top: 2rem;
        display:flex;
        font-size: 1.4rem;
        width:25.1rem;
        height: 10.8rem;
        color: #fff;
        flex-direction: column;
        border:1px solid #045585;
        background:rgba(6,31,79,.5);
        .t,.b{
            flex: 1 1 50%;
            display:flex;
            flex-direction: row;
            .left{
                flex: 1 1 50%;
                text-align: left;
            }
            .right{
                flex: 1 1 50%;
                text-align: right;
                font-size: 2rem;
                color:#71F55C;
            }
            .b{
               color: #F36964;
               background:rgba(8,50,107,.5);
            }
        }
        span{
          position: relative;
          top:-1rem;
          font-size: 1.6rem;
          margin: 1rem;
          color:#00F6FF;
        }
`

const Content: FC<ICount> = function (props) {

    return (
        <AddAndDel>
            <div className='t'><span className="left">{props.addText}</span><span className="right">{toThousands(props.addNum)}{props.addUnit}</span></div>
            <div className='b'><span className="left">{props.freeze}</span> <span className="right">{toThousands(props.freezeNum)}{props.freezeUnit}</span></div>
        </AddAndDel>
    )
}

export default Content
